<template>
	<Header :titleName="'企业智能问数平台'" :titleDesc="'无需编写代码就能完成专业数据洞察（清洗、建模、可视化），即可生成可解释性分析报告'"></Header>
	<div class="homeContent">
		<!-- 上传模块 -->
		<div class="uploadModule">
			<div class="iconAndText">
				<el-icon>
					<FolderAdd />
				</el-icon>
				上传数据库资料
			</div>
			<!-- 文件上传拖拽区 -->
			<div class="uploadArea" @drop="handleDrop">
				<div v-if="files.length === 0" class="uploadAreaText">
					<img src="@/assets/images/upload.png" class="uploadIcont">
					<div class="text">选择或拖拽文件</div>
					<!-- 支持格式 -->
					<div class="supportFormat">(支持多选：CSV/EXCEL)</div>
				</div>
				<div v-else>
					<div class="uploadFileList">
						<div v-for="file in files" :key="file.name" class="fileItem">
							<div class="fileName">{{ file.name }}</div>
							<!-- 处理显示文件大小 -->
							<div class="fileSize">{{ formatFileSize(file.size) }}</div>
							<div class="deleteIcon" @click="deleteFile(file)">
								×
							</div>
						</div>
					</div>
				</div>
				<input v-if="fileInputShow" type="file" class="fileInput" @change="handleFileChange" multiple />
			</div>
			<!-- 文件状态 -->
			<div class="fileStatus">
				<div class="text">文件状态</div>
				<div class="status">{{ fileStatus }}</div>
			</div>
		</div>
		<!-- 解析模块 -->
		<div class="parseModule">
			<div class="iconAndText">
				<el-icon>
					<Comment />
				</el-icon>
				知识库问题
			</div>
			<!-- 请输入知识库相关问题 -->
			<div class="inputBigBox">
				<div class="inputArea">
					请输入数据库相关问题
				</div>
				<el-input class="inputTextarea" v-model="inputTextarea" :autosize="{ minRows: 5, maxRows: 10 }"
					type="textarea" placeholder="在此输入您的问题" />
				<div class="inputBtn">
					<!-- 提交问题 -->
					<div class="btn active" :class="{ 'disabled': isLoading }" @click="submitQuestionBtn">
						提交问题</div>
					<div class="btn" @click="clearInput">清空</div>
				</div>
			</div>
			<!-- 示例 -->
			<div class="exampleBigBox">
				<div class="problem">
					<div class="title">快速提问示例：</div>
					<div class="listBox">
						<div class="ProblemList content" @click="fileToBox(item, 'problem')" v-for="item in exampleList"
							:key="item.problem">{{
								item.problem }}</div>
					</div>
				</div>
				<div class="file">
					<div class="title">知识库示例：</div>
					<div class="listBox">
						<div class="fileList content" v-for="item in exampleList" :key="item.problem">
							<el-checkbox v-model="item.active" label="" @change="fileToBox(item, 'file')" />
							<span>{{ item.name }} &emsp;</span>
							<a :href="item.url" :download="item.name">
								<el-icon>
									<Download />
								</el-icon>
							</a>
						</div>
					</div>
				</div>
			</div>

			<!-- 结果展示区 -->
			<div class="resultArea">
				<div class="navList">
					<div class="NavTitle active">专业回答</div>
				</div>
				<div class="resultContent">
					<div class="resultAnswerList" v-if="answerList.length > 0">
						<div v-for="item in answerList" :key="item.id" class="resultAnswer">
							<div>{{ item.question }}</div>
							<!-- 图表渲染 -->
							<div v-if="item.pandas_type === 'plot'" class="chart-container">
								<div :id="'chart-' + item.index" class="chart" style="width: 100%; height: 400px;">
								</div>
							</div>
							<!-- 数字对象 -->
							<div v-else-if="item.pandas_type === 'number'" class="number-container">
								<div v-for="key in Object.keys(item.result)" :key="key" class="number-item">
									{{ key }}: {{ item.result[key] }}
								</div>
							</div>
							<!-- 表格渲染 -->
							<div v-else-if="item.pandas_type === 'dataframe'" class="table-container">
								<div class="table-wrapper">
									<table class="data-table">
										<thead>
											<tr>
												<th v-for="col in item.result.columns" :key="col">{{ col }}</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(row, rowIndex) in item.result.data" :key="rowIndex">
												<td v-for="col in row" :key="col">
													{{ col }}
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!-- 文本渲染 -->
							<div v-else class="text-container">
								<div v-if="typeof item.result === 'string'" v-html="marked(item.result)"></div>
								<div v-else>
									<pre>{{ JSON.stringify(item.result, null, 2) }}</pre>
								</div>
							</div>
						</div>
					</div>
					<div v-html="answer" :class="answer.length > 20 ? 'result' : ''"></div>
					<el-icon v-if="isLoading" class="is-loading">
						<Loading />
					</el-icon>
				</div>
			</div>
		</div>
	</div>
	<Footer></Footer>
</template>

<script setup>
import { ref, watch, onMounted, watchEffect, nextTick, onBeforeUnmount } from "vue";
import { marked } from 'marked';
import * as echarts from 'echarts';
// 导入组件
import Header from "@/components/headerView.vue";
import Footer from "@/components/footerView.vue";
// 导入icon
import { Loading, Comment, FolderAdd, Download } from '@element-plus/icons-vue'
// 导入接口api
import { uploadFiles, submitQuestion } from "@/api/intelligent";
import { BASE_URL } from '@/utils/zongID';
// 添加图表实例Map
const chartInstances = ref(new Map());
// 重载选择框用的，处理重复选择相同文件无法二次选择的问题
const fileInputShow = ref(true);
// 输入框内容
const inputTextarea = ref("");
// 文件二进制文件
const files = ref([]);
const fileStatus = ref('等待文件上传');// 文件状态

const uuid = ref("");// 选中的文件的uuid
// 示例文件
const shiliFile = ref(null);
// 示例问题列表
const exampleList = ref(
	[

	]
)

// 接收的答案
const answer = ref("等待提交问题");
const answerList = ref([]);// 答案列表
// 是否在等待回答
const isLoading = ref(false);
// 拖拽读取文件
const handleDrop = (event) => {
	// 阻止默认行为，防止浏览器打开文件
	event.preventDefault();
	const droppedFiles = event.dataTransfer.files; // 获取拖拽的文件
	// 允许的文件类型
	const allowedTypes = ['excel', 'csv'];
	// 检测文件尾缀
	const validFiles = Array.from(droppedFiles).filter(file => {
		// 获取文件扩展名，转换为小写
		const fileExtension = file.name.split('.').pop().toLowerCase();
		return allowedTypes.includes(fileExtension);
	});
	if (validFiles.length > 0) {
		files.value = [...files.value, ...validFiles];
	} else {
		fileStatus.value = '请选择有效的文件格式';
		// element提示组件
		ElMessage('请选择有效的文件格式');
	}
}
// 点击上传文件
const handleFileChange = (event) => {
	const selectedFiles = event.target.files;
	// 允许的文件类型
	const allowedTypes = ['excel', 'csv'];
	// 检测文件尾缀
	const validFiles = Array.from(selectedFiles).filter(file => {
		// 获取文件扩展名，转换为小写
		const fileExtension = file.name.split('.').pop().toLowerCase();
		return allowedTypes.includes(fileExtension);
	});

	if (validFiles.length > 0) {
		files.value = [...files.value, ...validFiles];
	} else {
		fileStatus.value = '请选择有效的文件格式';
		ElMessage('请选择有效的文件格式');
	}
}
// 删除文件
const deleteFile = (file) => {
	// 查找并取消实例文件的勾选状态
	const exampleFileIndex = exampleList.value.findIndex(item => item.data === file);
	if (exampleFileIndex > -1) {
		exampleList.value[exampleFileIndex].active = false;
	}
	// 删除文件
	const fileIndex = files.value.indexOf(file);
	if (fileIndex > -1) {
		files.value.splice(fileIndex, 1);
	}
	// 更新文件状态
	fileStatus.value = files.value.length === 0
		? '等待文件上传'
		: `${files.value.length} 个文件已准备好上传`;
	uuid.value = "";
	// 文件选择输入框的内容也需要清空
	fileInputShow.value = false;
	setTimeout(() => {
		fileInputShow.value = true;
	}, 0)
};
// 文件上传操作
const handleUpload = () => {
	// 文件最多不超过五个
	if (files.value.length > 1) {
		fileStatus.value = '已超过文件最大上传数量（1个）';
		ElMessageBox.alert("文件数量不能超过1个", "提示", {
			confirmButtonText: "确定",
			type: "warning",
		}).then(() => {
			return;
		}).catch(() => {
			return
		})
		return;
	}
	// 文件大小不能超过5M
	let totalSize = 0;
	files.value.forEach(file => {
		totalSize += file.size;
	});
	if (totalSize > 5 * 1024 * 1024) {
		fileStatus.value = '已超过文件最大上传大小（5M）';
		ElMessageBox.alert("文件总大小不能超过5M", "提示", {
			confirmButtonText: "确定",
			type: "warning",
		}).then(() => {
			return;
		}).catch(() => {
			return
		})
		return;
	}
	fileStatus.value = '文件上传中...';
	let formData = new FormData();
	files.value.forEach(file => {
		formData.append('file', file);
	});
	// 调用接口上传文件
	uploadFiles(formData).then(res => {
		if (res.session_id) {
			console.log(res);
			uuid.value = res.session_id;
			fileStatus.value = '文件上传成功';
			ElMessage.success('文件上传成功');
		} else {
			fileStatus.value = res.message;
		}
	}).catch(err => {
		fileStatus.value = '文件上传失败';
		ElMessage.error('文件上传失败');
	});
};
// 文件大小显示处理
const formatFileSize = (size) => {
	if (size < 1024) {
		return size + 'B';
	} else if (size < 1024 * 1024) {
		return (size / 1024).toFixed(2) + 'KB';
	} else if (size < 1024 * 1024 * 1024) {
		return (size / (1024 * 1024)).toFixed(2) + 'MB';
	} else {
		return (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
	}
}
// 提交问题
const submitQuestionBtn = async () => {
	if (isLoading.value) {
		ElMessage.warning('正在回答，请等待回答完成后再提交问题');
		return; // 如果正在加载，直接返回
	}

	if (inputTextarea.value == "") {
		ElMessageBox.alert("请输入问题", "提示", {
			confirmButtonText: "确定",
			type: "warning",
		});
		return;
	}

	// 如果只有问题没有文件
	if (files.value.length === 0 || uuid.value == "") {
		ElMessageBox.alert("请先处理上传文件或者选择知识库示例", "提示", {
			confirmButtonText: "确定",
			type: "warning",
		});
		return;
	}

	// 初始化状态
	answer.value = "";
	answerList.value = [];
	isLoading.value = true;
	try {
		const response = await fetch(`${BASE_URL}/api/fuxigen-chat`, {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
				'Connection': 'keep-alive',
				'Keep-Alive': 'timeout=3600, max=1000'
			},
			body: JSON.stringify({
				question: inputTextarea.value,
				session_id: uuid.value,
				generate_questions: true
			}),
		});

		if (!response.ok || !response.body) {
			throw new Error('Network response was not ok');
		}
		const reader = response.body.getReader();
		const decoder = new TextDecoder();
		let result = '';
		let isReading = true;

		while (isReading) {
			const { done, value } = await reader.read();
			if (done) {
				isReading = false;
				break;
			}

			const chunk = decoder.decode(value, { stream: true });
			result += chunk;
			const lines = result.split('\n');
			result = lines.pop() || ''; // 保留最后一个不完整的行
			for (const line of lines) {
				if (line.trim() === '') continue; // 跳过空行
				if (line.startsWith('data: ')) {
					try {
						const jsonStr = line.slice(6).trim(); // 移除 "data: " 前缀
						const data = JSON.parse(jsonStr);
						console.log("响应数据", data);
						// 处理接收到的数据
						if (data.type === 'generated_answer') {
							if (data.result != '模型处理失败！') {
								answerList.value.push(data);
							}
						}
						// 处理最后一条数据
						// 可以在这里处理最后的见解数据
						if (data.type === 'insight') {
							if (data.is_last) {
								isReading = false;
								answer.value = marked(answer.value);
							} else {
								answer.value += data.content
							}
						}
					} catch (e) {
						console.warn('JSON 解析失败:', line);
					}
				}
			}
		}
	} catch (error) {
		console.error('请求失败:', error);
		ElMessage.error('网络错误，请检查网络连接！');
		answer.value = "回答失败";
	} finally {
		isLoading.value = false;
	}
}
// 清空输入框内容
const clearInput = () => {
	inputTextarea.value = "";
}

/** 示例文件选中 */
const fileToBox = (item, type) => {
	if (type === "problem") {
		console.log(item.problem);
		inputTextarea.value = item.problem;
		if (files.value.length === 0) {
			files.value.push(item.data);
			item.active = true;
		}
	}
	if (type === "file") {
		if (item.active) {
			files.value.push(item.data);
			console.table(files.value);
		} else {
			const index = files.value.indexOf(item.data);
			if (index > -1) {
				files.value.splice(index, 1);
			}
			if (files.value.length === 0) {
				uuid.value = "";
				fileStatus.value = '当前未选择文件';
			} else {
				fileStatus.value = `${files.value.length} 个文件已准备好上传`;
			}
		}
	}
}
// 生成ECharts配置
const generateChartOptions = (data) => {
	console.log(data);

	const baseOption = {
		title: {
			text: data.question,
			left: 'center'
		},
		grid: {
			top: 60,
			right: 40,
			bottom: 60,
			left: 60,
			containLabel: true
		},
	};

	switch (data.type) {
		case 'scatter':
			return {
				...baseOption,
				tooltip: {
					trigger: 'item',
					formatter: function (params) {
						return `${params.data[0]}: ${params.data[0].toFixed(2)}%<br/>${params.data[1]}: ${params.data[1].toFixed(2)}%`;
					}
				},
				xAxis: {
					type: 'value',
					name: data.options?.scales?.x?.title?.text || 'X轴',
					nameLocation: 'middle',
					nameGap: 50,
					axisLabel: {
						formatter: '{value}%'
					}
				},
				yAxis: {
					type: 'value',
					name: data.options?.scales?.y?.title?.text || 'Y轴',
					nameLocation: 'middle',
					nameGap: 65,
					axisLabel: {
						formatter: '{value}%'
					}
				},
				series: [{
					type: 'scatter',
					data: data.data.datasets[0].data.map(item => [
						typeof item.x === 'number' ? Number(item.x.toFixed(2)) : item.x,
						typeof item.y === 'number' ? Number(item.y.toFixed(2)) : item.y
					]),
					symbolSize: 10,
					itemStyle: {
						color: data.data.datasets[0].backgroundColor || '#87ceeb'
					}
				}]
			};

		case 'bar':
			return {
				...baseOption,
				tooltip: {
					trigger: 'axis',
					axisPointer: { type: 'shadow' },
					formatter: function (params) {
						const value = params[0].value;
						// 检查值是否存在
						if (value === undefined || value === null) {
							return `${params[0].name}<br/>${params[0].seriesName}: 无数据`;
						}
						return `${params[0].name}<br/>${params[0].seriesName}: ${typeof value === 'number' ? value.toLocaleString() : value}${data.options?.scales?.y?.unit || ''}`;
					}
				},
				xAxis: {
					type: 'category',
					data: data.data.labels,
					name: data.options?.scales?.x?.title?.text,
					nameLocation: 'middle',
					nameGap: 50,
					axisLabel: {
						interval: 0,
						rotate: 30,
						formatter: function (value) {
							return value.length > 10 ? value.substring(0, 10) + '...' : value;
						}
					}
				},
				yAxis: {
					type: 'value',
					name: data.options?.scales?.y?.title?.text,
					nameLocation: 'middle',
					nameGap: 65,
					axisLabel: {
						formatter: function (value) {
							if (data.options?.scales?.y?.format === 'percent') {
								return value + '%';
							} else if (data.options?.scales?.y?.format === 'number') {
								return (value / 10000).toFixed(1) + '万';
							}
							return value;
						}
					}
				},
				series: [{
					name: data.data.datasets[0].label || '',
					type: 'bar',
					data: data.data.datasets[0].data.map(item =>
						typeof item === 'object' ? item.y : item
					),
					itemStyle: {
						color: function (params) {
							const colors = data.data.datasets[0].backgroundColor;
							return Array.isArray(colors) ? colors[params.dataIndex] : colors || '#87ceeb';
						}
					},
					label: {
						show: true,
						position: 'top',
						formatter: function (params) {
							const value = params.value;
							if (data.options?.scales?.y?.format === 'percent') {
								return value.toFixed(1) + '%';
							} else if (data.options?.scales?.y?.format === 'number') {
								return (value / 10000).toFixed(1) + '万';
							}
							return value;
						}
					}
				}]
			};

		case 'line':
			return {
				...baseOption,
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					data: data.data.labels,
					name: data.options?.scales?.x?.title?.text,
					nameLocation: 'middle',
					nameGap: 50
				},
				yAxis: {
					type: 'value',
					name: data.options?.scales?.y?.title?.text,
					nameLocation: 'middle',
					nameGap: 85
				},
				series: data.data.datasets.map(dataset => ({
					type: 'line',
					name: dataset.label || '',
					data: dataset.data.map(item => typeof item === 'object' ? item.y : item),
					itemStyle: {
						color: dataset.backgroundColor || '#87ceeb'
					}
				}))
			};

		case 'pie':
			return {
				...baseOption,
				title: {
					text: data.options.plugins.title.text,
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					top: 'middle'
				},
				series: [{
					type: 'pie',
					radius: '50%',
					data: data.data.labels.map((label, index) => ({
						name: label,
						value: data.data.datasets[0].data[index],
						itemStyle: {
							color: data.data.datasets[0].backgroundColor?.[index] || '#87ceeb'
						}
					}))
				}]
			};

		default:
			console.warn('未知的图表类型:', data.type);
			return baseOption;
	}
};

// 渲染图表
const renderChart = (index, data) => {
	nextTick(() => {
		const chartId = `chart-${index}`;
		const chartDom = document.getElementById(chartId);

		if (!chartDom) {
			console.warn(`Chart DOM element #${chartId} not found, retrying in 100ms`);
			setTimeout(() => renderChart(index, data), 100);
			return;
		}

		// 清理旧实例
		let chart = chartInstances.value.get(chartId);
		if (chart && !chart.isDisposed()) {
			chart.dispose();
		}

		try {
			chart = echarts.init(chartDom);
			chartInstances.value.set(chartId, chart);

			const option = generateChartOptions(data.result);
			console.log('Rendering chart with options:', option);

			chart.setOption(option, { notMerge: true });

			// 响应式调整
			const resizeObserver = new ResizeObserver(() => chart.resize());
			resizeObserver.observe(chartDom);

			// 清理旧的 resize 监听器
			return () => {
				resizeObserver.disconnect();
				if (chart && !chart.isDisposed()) {
					chart.dispose();
				}
			};
		} catch (e) {
			console.error('Error rendering chart:', e);
		}
	});
};

watchEffect(() => {
	answerList.value.forEach(item => {
		if (item.pandas_type === 'plot') {
			renderChart(item.index, item);
		}
	});
});
/** 监听文件列表变化 */
watch(files, (newFiles) => {
	if (newFiles.length === 0) {
		fileStatus.value = '等待文件上传';
	} else if (newFiles.length > 0) {
		handleUpload();
	}
}, { deep: true });
// 在组件挂载时加载示例文件
onMounted(async () => {
	try {
		// 1. 获取CSV文件的URL（假设文件放在public目录下）
		const csvUrl = '/商圈数据.csv'; // 替换为你的文件路径

		// 2. 获取文件内容
		const response = await fetch(csvUrl);
		const blob = await response.blob();

		// 3. 创建File对象
		shiliFile.value = new File([blob], '商圈数据.csv', { type: 'text/csv' });

		// 初始化示例列表
		exampleList.value = [
			{
				problem: "分析这个表格",
				name: "《商圈数据》.csv",
				url: URL.createObjectURL(shiliFile.value),
				data: shiliFile.value,
				active: false
			}
		];

	} catch (error) {
		console.error('加载示例文件失败:', error);
		// 即使加载失败也初始化示例列表（不带文件）
		exampleList.value = [
			{
				problem: "分析这个表格",
				name: "《商圈数据》.csv",
				url: '#',
				data: null,
				active: false
			}
		];
	}
});
// 组件卸载时清理图表实例
onBeforeUnmount(() => {
	chartInstances.value.forEach((chart, key) => {
		if (chart && !chart.isDisposed()) {
			chart.dispose();
		}
	});
	chartInstances.value.clear();
});
</script>
<style lang="scss" scoped>
.homeContent {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100vh - 190px);
	box-sizing: border-box;
	max-width: 1750px;
	margin: 50px auto 0 auto;
	min-height: 690px;

	.uploadModule {
		width: 30%;
		height: 100%;
		background-color: #fff;
		border-radius: 2px;
		padding: 10px 20px;
		box-sizing: border-box;

		.iconAndText {
			font-size: 21px;
			color: rgb(11, 57, 81);
			font-weight: 700;
			margin-top: 5px;
			display: flex;
			align-items: center;

			.el-icon {
				font-size: 30px;
				margin-right: 10px;
			}
		}

		// 请先登录或使用示例网站
		.uploadArea {
			width: 100%;
			background-color: rgb(250, 250, 250);
			// 虚线框
			border: 2px dashed #ccc;
			border-radius: 10px;
			margin-top: 20px;
			font-size: 18px;
			color: rgb(11, 57, 81);
			font-weight: 700;
			position: relative;
			cursor: pointer;

			.uploadAreaText {
				height: 280px;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				.uploadIcont {
					width: 40px;
				}
			}

			.uploadFileList {
				display: flex;
				flex-direction: column;
				width: 100%;
				// margin-top: 10px;
				box-sizing: border-box;
				border-radius: 10px;
				padding: 10px 25px;
				// border: 2px dashed rgb(17, 72, 106);

				.fileItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					margin-top: 5px;

					.fileName {
						height: 25px;
						// 超出隐藏
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						flex: 1;
						font-size: 17px;
						color: rgb(11, 57, 81);
						font-weight: 700;
					}

					.fileSize {
						margin-left: 10px;
						min-width: 25px;
						font-size: 15px;
						color: #666;
					}

					.deleteIcon {
						min-width: 15px;
						margin-left: 10px;
						position: relative;
						z-index: 1;
						cursor: pointer;
					}
				}
			}

			.fileInput {
				width: 100%;
				height: 100%;
				opacity: 0;
				position: absolute;
				left: 0;
				top: 0;
				cursor: pointer;
			}
		}


		.uploadBtn {
			width: 100%;
			height: 40px;
			background-color: rgb(3, 58, 88);
			border-radius: 10px;
			color: #fff;
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}


		.fileStatus {
			margin-top: 30px;
			// height: calc(100% - 450px);
			height: 230px;
			box-shadow: 2px 2px 12px #aaa;
			border-radius: 5px;

			.text {
				border-radius: 5px 5px 0 0;
				height: 42px;
				font-size: 17px;
				background-color: rgb(240, 241, 243);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.status {
				border-radius: 0 0 5px 5px;
				height: calc(100% - 42px);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 17px;
				color: rgb(11, 57, 81);
				color: #aaa;
			}
		}
	}

	.parseModule {
		padding: 10px 20px;

		box-sizing: border-box;
		width: 50%;
		height: 100%;
		background-color: #fff;
		border-radius: 2px;
		display: flex;
		flex-direction: column;

		.iconAndText {
			font-size: 21px;
			color: rgb(11, 57, 81);
			font-weight: 700;
			margin-top: 5px;
			display: flex;
			align-items: center;

			.el-icon {
				font-size: 30px;
				margin-top: 3px;
				margin-right: 5px;
			}
		}

		.checkboxArea {
			display: flex;
			font-size: 18px;

			.checkboxGroup {
				display: flex;
				align-items: center;
				margin-left: 20px;


			}
		}

		.inputBigBox {
			margin-top: 20px;

			.inputArea {
				font-size: 16px;
				color: rgb(24, 52, 66);
				font-weight: 700;
			}

			.inputTextarea {
				border: 2px solid rgb(4, 57, 89);
				border-radius: 5px;
				margin-top: 10px;
			}

			.inputBtn {
				display: flex;
				margin-top: 15px;

				.btn {
					cursor: pointer;
					width: calc(50% - 10px);
					height: 40px;
					border: 2px solid rgb(4, 57, 89);
					border-radius: 10px;
					color: rgb(17, 72, 106);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 17px;
					font-weight: 700;

					/* 添加禁用状态的样式 */
					.disabled {
						opacity: 0.5;
						cursor: not-allowed;
						pointer-events: none;
					}
				}

				.active {
					background-color: rgb(4, 57, 89);
					color: #fff;
					margin-right: 20px;
				}
			}
		}

		.exampleBigBox {
			margin-top: 20px;
			display: flex;
			justify-content: space-around;
			width: 100%;

			.title {
				font-size: 18px;
				color: rgb(11, 57, 81);
				font-weight: 700;
				margin-top: 20px;
			}

			.problem {
				width: calc(50% - 10px);

			}

			.file {
				width: calc(50% - 10px);
				margin-left: 20px;
			}

			.listBox {
				// margin-top: 15px;
				width: 100%;
				max-height: 350px;
				overflow-y: auto;

				.content {
					height: 20px;
					line-height: 20px;
					margin: 12px 0;
				}

				;

				.ProblemList {
					text-align: center;
					font-weight: 400;
					font-size: 14px;
					border: 1px solid rgb(11, 57, 81);
					padding: 5px 10px;
					border-radius: 10px;

				}

				.fileList {
					display: flex;
					align-items: center;
					padding: 6px 10px;

					a {
						margin-bottom: -3px;
					}
				}
			}

		}

		.resultArea {
			flex: 1;
			margin: 10px 0;
			height: 200px;
			box-shadow: 2px 2px 12px #aaa;
			border-radius: 5px;

			.navList {
				border-radius: 5px 5px 0 0;
				// height: 42px;
				font-size: 17px;
				background-color: rgb(240, 241, 243);
				display: flex;
				align-items: center;
				justify-content: center;

				.NavTitle {
					padding: 13px;
					color: #666;
					font-weight: 700;
				}

				.active {
					color: rgb(17, 72, 106);
					// border-bottom: 3px solid rgb(24, 52, 66);
				}
			}

			.resultContent {
				border-radius: 0 0 5px 5px;
				height: calc(100% - 79px);
				display: flex;
				flex-direction: column;
				// justify-content: center;
				// align-items: center;
				padding: 15px 30px;
				overflow-x: auto;
				font-size: 17px;
				color: rgb(11, 57, 81);
				color: #aaa;

				.resultAnswerList {
					color: #0009;
				}

				.is-loading {
					margin: 0 auto;
				}

				.result {
					color: #000;
				}
			}
		}
	}
}

// 表格样式
/* 表格样式 */
.table-container {
	margin: 20px 0;
	overflow-x: auto;
}

.table-wrapper {
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid #ebeef5;
	border-radius: 4px;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.data-table th,
.data-table td {
	padding: 12px 16px;
	border: 1px solid #ebeef5;
	text-align: left;
}

.data-table th {
	background-color: #f5f7fa;
	font-weight: 600;
	position: sticky;
	top: 0;
	z-index: 1;
}

.data-table tr:nth-child(even) {
	background-color: #fafafa;
}

.data-table tr:hover {
	background-color: #f5f7fa;
}

/* 滚动条样式 */
.table-wrapper::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.table-wrapper::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
	border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.chart-container {
	width: 100%;
	height: 400px;
	margin: 20px 0;

	.chart {
		width: 100%;
		height: 100%;
		min-height: 400px;
	}
}
</style>
